<template>
    <div class="recommend">
        <div v-for="item,index in recommends" :key="index" class="recommend-item" >
            <a :href="item.link">
                <img :src="item.image" alt="" @load="recommendLoad">
                <div class="title">{{item.title}}</div>
            </a>
        </div>
    </div>
    
</template>


<script>
export default {
    props: {
        recommends: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return{
            isLoad: false,
        }
    },
    methods: {
        recommendLoad() {
            if(!this.isLoad) {
                this.$emit('recommendLoad')
                this.isLoad = true
            }
            
        }
    }
}
</script>



<style scoped>
    .recommend{
        display: flex;
        text-align: center;
        padding: 15px 0;
        border-bottom: 8px solid #eee;
        /* flex-wrap: wrap; */
    }

    .recommend .recommend-item{
        flex: 1;
        margin:0 6px;
        font-size: 15px;
        
    }

    .recommend .recommend-item img{
        width: 100%;
        margin-bottom: 10px;
    }
</style>



